<template>
  <div>
    <a-button type="primary" @click="openAddModal" style="margin-bottom: 10px;">添加</a-button>
    <a-table :columns="unitSchedulingColumns" :data-source="unitSchedulingData" row-key="key">
      <span slot="action" slot-scope="text, record">
        <span
          style="color: #028BE2; cursor: pointer; margin-right: 20px;"
          @click="openEditModal(record)"
        >编辑</span>
        <span
          style="color: #028BE2; cursor: pointer; margin-right: 20px;"
          @click="deleteUnitScheduling(record.key)"
        >删除</span>
      </span>
    </a-table>

    <a-modal
      :visible="modalVisible"
      title="承担单位排课时间信息"
      @ok="handleModalOk"
      @cancel="handleModalCancel"
    >
      <div>
        <div>
          <span>承担单位名称: </span>
          <a-input v-model="currentRecord.unitName" />
        </div>
        <div>
          <span>排课时间: </span>
		  <DatePickByCN
		     v-model="currentRecord.schedulingTime"
		    placeholder="请输入排课时间"/>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>

export default {
  data() {
    return {
      unitSchedulingColumns: [
        {
          title: '承担单位名称',
          dataIndex: 'unitName',
          key: 'unitName'
        },
        {
          title: '排课时间',
          dataIndex: 'schedulingTime',
          key: 'schedulingTime'
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          width: 220,
          scopedSlots: {
            customRender: 'action'
          }
        }
      ],
      unitSchedulingData: [
        {
          key: '1',
          unitName: '信息工程系',
          schedulingTime:'2025-02-24',
        }
      ],
      modalVisible: false,
      currentRecord: {
        key: null,
        unitName: '',
        schedulingTime:'2025-02-24',
      },
      isAdding: false
    };
  },
  methods: {
    openAddModal() {
      this.isAdding = true;
      this.currentRecord = {
        key: null,
        unitName: '',
        schedulingTime: ``,
      };
      this.modalVisible = true;
    },
    openEditModal(record) {
      this.isAdding = false;
      this.currentRecord = { ...record };
      this.modalVisible = true;
    },
    handleModalOk() {
      if (this.isAdding) {
        const newKey = String(Number(this.unitSchedulingData[this.unitSchedulingData.length - 1].key) + 1);
        this.unitSchedulingData.push({
          key: newKey,
          unitName: this.currentRecord.unitName,
          schedulingTime: this.currentRecord.schedulingTime,
        });
      } else {
        const index = this.unitSchedulingData.findIndex(item => item.key === this.currentRecord.key);
        if (index!== -1) {
          // 使用 Vue.set 确保响应式更新
          Vue.set(this.unitSchedulingData, index, {
            ...this.unitSchedulingData[index],
            unitName: this.currentRecord.unitName,
            schedulingTime: this.currentRecord.schedulingTime,
          });
        }
      }
      this.modalVisible = false;
    },
    handleModalCancel() {
      this.modalVisible = false;
    },
    deleteUnitScheduling(key) {
      this.unitSchedulingData = this.unitSchedulingData.filter(item => item.key!== key);
    }
  }
};
</script>

<style scoped>
/* 可以添加一些样式 */
</style>